<template>
  <div class="portaRegister-page">
    <div class="header">
      <div class="header-background-image">
        <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-header-background.png" class="background-image">
      </div>
      <div class="image-buy">
        <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-image-content.png" class="content-image">
      </div>
    </div>
    <div class="content">
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_name.png" class="icon-name"> <span>*</span>
        </div>
        <input type="text" name="" class="input-control" placeholder="请输入姓名" id="name" v-model="userName">
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_phone.png" class="icon-name"> <span>*</span>
        </div>
        <input type="text" name="" class="input-control" placeholder="请输入手机号码" id="phone" v-model="phone">
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_password.png" class="icon-name"> <span>*</span>
        </div>
        <input type="password" name="" class="input-control" placeholder="请输入密码" id="password" v-model="password">
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_bank.png" class="icon-name"> <span>&nbsp;</span>
        </div>
        <input type="text" name="" class="input-control" placeholder="请输入开户行" id="bankName" v-model="bankName">
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_bank_number.png" class="icon-name"> <span>&nbsp;</span>
        </div>
        <input type="text" name="" class="input-control" placeholder="请输入银行账号" id="bankNum" v-model="bankCardNumber">
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_message.png" class="icon-name"> <span>&nbsp;</span>
        </div>
        <input type="text" name="" class="input-control" placeholder="请输入留言" id="remark" v-model="remark">
      </div>
    </div>
    <div class="rules-container">
      <input type="checkbox" id="checkbox-1" class="qudao-rules" style="display: none" value="1" name="" checked>
      <label for="checkbox-1"></label>
      <span>我已阅读并遵守《渠道守则》</span>
    </div>
    <div class="submit-container" id="regBtn" @click="submit">
      <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_submit.png" class="submit-image">
    </div>
  </div>
</template>
<script>
import { wxshare } from 'common/mixin'
import { checkPhone, checkZhName, checkpw } from 'common/utils'
import { mapActions } from 'vuex'
import { MessageBox, Indicator, Toast } from 'mint-ui';

export default {
  mixins: [wxshare],
  data() {
    return {
      userName: '',
      phone: '',
      password: '',
      bankName: '',
      bankCardNumber: '',
      remark: ''
    }
  },

  methods: {
    ...mapActions({
      channelRegister: 'ChannelRegister',
    }),
    submit() {
      // if (!checkZhName(this.userName)) {
      if (!this.userName) { //判断是否为空
        Toast('请先填写正确的中文名称！');
        return false;
      }
      if (!checkPhone(this.phone)) {
        Toast('请先填写正确的手机号！');
        return false;
      }

      if (!checkpw(this.password)) {
        Toast('密码至少8位且包含数字和字母');
        return false;
      }
      Indicator.open();
      this.channelRegister({ userName: this.userName, phone: this.phone, password: this.password, bankName: this.bankName, bankCardNumber: this.bankCardNumber, remark: this.remark })
        .then(result => {
          Indicator.close();
          MessageBox.alert("注册成功，前往登录", '温馨提示').then(action => {
            this.$router.push({ path: './login' })
          });
        }).catch(data => {
          // Toast(msg);
          Indicator.close();
          MessageBox.alert(data.msg, '温馨提示').then(action => {
            this.$router.push({ path: './login' })
          });
        });
    }
  }
}
</script>
<style lang="less">
.background-image {
    width: 100%;
    height: 4rem
}

.image-buy {
    margin-top: -4rem;
    margin-left: auto;
    margin-right: auto;
    width: 17rem;
}

.content-image {
    width: 100%;
}

.content {
    background: #FFFFFF;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.10);
    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto
}

.form-item {
    width: 100%;
    height: 3rem;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.iconBox {
    width: 4rem;
    text-align: center;
    span {
      color: red;
    }
}

.icon-name {
    width: 1rem;
    height: 1rem;
}

.input-control {
    width: 100%;
    height: 90%;
    padding-left: 1rem;
    outline: none;
    color: #000;
    font-size: 0.9rem;
    font-family: PingFangSC;
}

.line {
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.10);
}

.rules-container {
    margin: 0.5rem auto auto 0;
    width: 17rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
}

.qudao-rules+label {
    cursor: pointer;
}

[id^="checkbox-"]+label {
    background-color: #ffffff;
    border: 1px solid #29c0e4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

[id^="checkbox-"]+label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

[id="checkbox-1"]:checked+label {
    background-color: #29c0e4;
    border: 1px solid #29c0e4;
}

.submit-container {
    margin: 0.5rem auto auto 0.5rem;
    text-align: center;
}

.submit-image {
    width: 16rem;
    height: 3.75rem;
}
</style>
